<% @page_title = "Account Statistics" %>

<% content_for :header do %>
  <h1 class="header__title"><%= @page_title %></h1>
<% end %>

<section class="settings">
  <div class="settings__panel panel shadow center">
    <div class="flex flex-column gap margin-block-half">
      <div class="flex flex-column gap-half">
        <header>
          <h2 class="divider txt-medium margin-block-start">Accounts Created</h2>
        </header>
        <div class="flex gap-half">
          <div class="flex flex-column gap-quarter flex-item-grow">
            <div class="txt-x-small">Total</div>
            <div class="txt-large">
              <strong><%= @accounts_total %></strong>
            </div>
          </div>
          <div class="flex flex-column gap-quarter flex-item-grow">
            <div class="txt-x-small">7 days</div>
            <div class="txt-large">
              <strong><%= @accounts_last_7_days %></strong>
            </div>
          </div>
          <div class="flex flex-column gap-quarter flex-item-grow">
            <div class="txt-x-small">24 hours</div>
            <div class="txt-large">
              <strong><%= @accounts_last_24_hours %></strong>
            </div>
          </div>
        </div>
      </div>

      <div class="flex flex-column gap-half">
        <header>
          <h2 class="divider txt-medium margin-block-start">Identities Created</h2>
        </header>
        <div class="flex gap-half">
          <div class="flex flex-column gap-quarter flex-item-grow">
            <div class="txt-x-small">Total</div>
            <div class="txt-large">
              <strong><%= @identities_total %></strong>
            </div>
          </div>
          <div class="flex flex-column gap-quarter flex-item-grow">
            <div class="txt-x-small">7 days</div>
            <div class="txt-large">
              <strong><%= @identities_last_7_days %></strong>
            </div>
          </div>
          <div class="flex flex-column gap-quarter flex-item-grow">
            <div class="txt-x-small">24 hours</div>
            <div class="txt-large">
              <strong><%= @identities_last_24_hours %></strong>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="settings__panel panel shadow center">
    <header>
      <h2 class="divider txt-medium margin-block-start">
        10 Most Recent Signups
      </h2>
    </header>

    <ul class="margin-block-half">
      <% @recent_accounts.each do |account| %>
        <% admin_user = account.users.owner.first %>
        <li class="flex align-start gap-half margin-block-start-half">
          <div
            class="flex-item-grow min-width overflow-ellipsis"
            style="text-align: left"
          >
            <strong><%= account.name %></strong>
            <br>
            <span class="txt-x-small txt-ink-medium">
              #<%= account.external_account_id %> •
              <%= admin_user&.identity&.email_address || "No admin" %>
            </span>
          </div>

          <div class="txt-medium txt-ink-medium" style="text-align: right">
            <%= time_ago_in_words(account.created_at) %> ago
          </div>
        </li>
      <% end %>
    </ul>
  </div>

  <div class="settings__panel panel shadow center">
    <header>
      <h2 class="divider txt-medium margin-block-start">
        Top 20 Accounts by Card Count
      </h2>
    </header>

    <ul class="margin-block-half">
      <% @top_accounts.each do |account| %>
        <% admin_user = account.users.owner.first %>
        <li class="flex align-start gap-half margin-block-start-half">
          <div
            class="flex-item-grow min-width overflow-ellipsis"
            style="text-align: left"
          >
            <strong><%= account.name %></strong>
            <br>
            <span class="txt-x-small txt-ink-medium">
              #<%= account.external_account_id %> •
              <%= admin_user&.identity&.email_address || "No admin" %>
            </span>
          </div>

          <div class="txt-medium">
            <strong><%= number_with_delimiter(account.cards_count) %></strong>
            <span class="txt-x-small txt-ink-medium">cards</span>
          </div>
        </li>
      <% end %>
    </ul>
  </div>
</section>
